<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/page_style.css" />
		<link rel="stylesheet" type="text/css" href="icon/iconfont.css"/>
		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script>
		var maxTime=60;//60ms，一分钟
		var start_flag=0;//用于标记开始考试
		var interVal;
		var question_location=0;//做的第几道题，默认为第一道
		var questions=["1","2","3","4","5"];
		var selectA=["1","2","3","4","5"];
		var selectB=["1","2","3","4","5"];
		var selectC=["1","2","3","4","5"];
		var selectD=["1","2","3","4","5"];
		//info中存储的是每个提的信息，qu_sec是第一个提的选项，其中-1代表未选，0,1,2,3分别代表A,B,C,D;qu_flag是第一个题是否有做标记,0没做，1做了
		var info1={"qu_sec":-1,"qu_flag":0};
		var info2={"qu_sec":-1,"qu_flag":0};
		var info3={"qu_sec":-1,"qu_flag":0};
		var info4={"qu_sec":-1,"qu_flag":0};
		var info5={"qu_sec":-1,"qu_flag":0};
		var qu=[info1,info2,info3,info4,info5];
		//初始化题目
		$(function(){
			$("#question").text(questions[question_location]);//题目
			$("#selec1").text("A:  "+questions[question_location]);//A选项
			$("#selec2").text("B:  "+questions[question_location]);//B选项
			$("#selec3").text("C:  "+questions[question_location]);//C选项
			$("#selec4").text("D:  "+questions[question_location]);//D选项
			$(":radio").each(function(){
					$(this).removeAttr("checked");
							})
			$("#icon1_desc").text("标记");
		})
			//初始化标签
			$(function(){
				console.log(qu.length);
				for(var i=0;i<5;i++){
					if(!qu[i].qu_flag){
						$("#questions-show div i").eq(i).css("visibility","hidden");
					}
				}
			})
			//处理标记
//			$(function(){
//				
//			})
			
			$(function(){
				$("#icon1_desc").click(function(){
				console.log("标记");
				if(qu[question_location].qu_flag){
					qu[question_location].qu_flag=0;
					$(this).text("标记");
					$("#questions-show div i").eq(question_location).css("visibility","hidden");
				}else{
					qu[question_location].qu_flag=1;
					$("#questions-show div i").eq(question_location).css("visibility","visible");
					$(this).text("取消标记");
				}
			})
			})
			$(function(){
				//用于点击计时开始考试
				$("#time-show i").click(function(){
					$(this).attr("class","iconfont icon-zanting");
					start_flag=1;
					console.log(start_flag);
					interVal=setInterval(timeCount,1000);
					
				})
			})
			//处理题目被点击
			$(function(){
				$('.se').each(function(i){
					$(this).mouseover(function(){
						$(this).addClass("Se");
					})
					$(this).mouseleave(function(){
						$(this).removeClass("Se");
					})
					$(this).click(function(){
						qu[i].qu_sec=i;
						$("#choi input").eq(i).prop("checked",true);
						$("#questions-show div").eq(question_location).addClass("Que");
					})
				})
	
})
			
//			$(function(){
//					
//					$("#selec").mouseover(function(){
//					$('.se').each(function(i){
//						$(this).mouseover(function(){
//							$(this).mouseenter(function(){
//								$(this).addClass("Se");
//							})
//							$(this).mouseleave(function(){
//								$(this).removeClass("Se");
//							})
//							$(this).click(function(){
//								//点击题目的同时也得让单选框选上
//								$("#choi input").eq(i).prop("checked",true);
//								qu[i].qu_sec=i;
//								console.log("选项："+qu[i].qu_sec);
//								$("#questions-show div").eq(question_location).addClass("Que");
//								
//							})
//						})
//					})
//					
//				})
//				
//			})
			$(function(){
				$("#choi input").each(function(i){
					$(this).click(function(){
						if(this.checked){
							qu[i].qu_sec=i;
							$("#questions-show div").eq(question_location).addClass("Que");
						}
					})
				})
			})
			//对选项上的处理
//			$(function(){
//				$("#choi input").click(function(){
//					$("#choi input").each(function(i){
////						console.log($(this).val());
//						if(this.checked){
//							qu[i].qu_sec=i;
////							console.log("选项："+qu[i].qu_sec)
//							$("#questions-show div").eq(question_location).addClass("Que");
//						}
//					})
//				})
//			})
			$(function(){
				//实现立刻交卷
				$("#submi").click(function(){
					maxTime=0;
					//差一个计时器销毁
				})
			})
			$(function(){
				//通过题目表单来选择要做的题目
				$("#questions-show div").click(function(){
					$("#questions-show div").each(function(index){
						$(this).click(function(){
							question_location=index;
							console.log(question_location);
							//根据题目的位置来更新题目
							$("#question").text(questions[question_location]);//题目
							$("#selec1").text("A:  "+questions[question_location]);//A选项
							$("#selec2").text("B:  "+questions[question_location]);//B选项
							$("#selec3").text("C:  "+questions[question_location]);//C选项
							$("#selec4").text("D:  "+questions[question_location]);//D选项
							//对选项进行处理
							if(qu[question_location].qu_sec!=-1)
							{
								$(":radio").eq(qu[question_location].qu_sec).prop("checked",true);
							}else{
								$(":radio").each(function(){
									$(this).removeAttr("checked");
								})
							}
							if(qu[question_location].qu_flag){
								$("#icon1_desc").text("取消标记");
							}else{
								$("#icon1_desc").text("标记");
							}
							
						})
					})
				})
			})
		function timeCount(){
					if(maxTime!=0){
					var s=Math.floor(maxTime%60);
					var m=Math.floor(maxTime/60%60);
					var h=Math.floor(maxTime/3600%60);
					$("#time-show span").text(h+":"+m+":"+s);
					maxTime-=1;
					}else{
						$("#time-show span").text(0+":"+0+":"+0);
						$("#basicinfo div").text("考试结束");
						alert("考试结束");
						clearInterval(interVal);
					}
				}	
		</script>
	</head>
	<body>
		<div id="test">
			<div id="left">
		<div id="basicinfo" >
			<h3>第三周小测试：选择题</h3>
			<div>答题中</div>
		</div>
		<div id="play">
			<div id="describ_questions"><b>单选题：</b><span>共5题，共20分</span></div>
			<div id="describ_question">[单选题&nbsp;<span id="mark">4.0分</span>&nbsp;]<span id="question">读取D:\test_csv，以下说法正确的是？</span></div>
			<div id="selec" >
				<div id="selec1" class="se">A.<span>你好</span></div>
				<div id="selec2" class="se">B.<span>你好</span></div>
				<div id="selec3" class="se">C.<span>你好</span></div>
				<div id="selec4" class="se">D.<span>你好</span></div>
			</div>
			<div id="choi">
				<input type="radio" name="choie" class="choie"/><span>A</span>
				<input type="radio" name="choie" class="choie"/><span>B</span>
				<input type="radio" name="choie" class="choie"/><span>C</span>
				<input type="radio" name="choie" class="choie"/><span>D</span>
				<i class="iconfont" id="icon1" >&#xe638;</i>
				<span id="icon1_desc">标记</span>
			</div>
			
		</div>
		</div>
		<div id="playinfo">
			<div id="time-show">
				<label>倒计时：</label><span>00:00:00</span>
				<i class="iconfont icon-bofangjian"></i>
			</div>
			<div id="show-info">
				<span>答题卡</span>
				<i class="iconfont " id="icon2">&#xe69e;</i>
			</div>
			<div id="questions-show">
				<div id="que1">
					
					<span>1</span>
					<i class="iconfont">&#xe638;</i>
				</div>
				<div id="que2">
					
					<span>2</span>
					<i class="iconfont">&#xe638;</i>
				</div>
				<div id="que3">
					
					<span>3</span>
					<i class="iconfont">&#xe638;</i>
				</div>
				<div id="que4">
					
					<span>4</span>
					<i class="iconfont">&#xe638;</i>
				</div>
				<div id="que5">
					
					<span>5</span>
					<i class="iconfont">&#xe638;</i>
				</div>
			</div>
			<div id="submi">
				<input type="button" value="马上交卷" />
			</div>
			
		</div>
		</div>
	</body>
</html>
